<template>
  <div class="left noprint">
    <el-col :span="24">
      <el-menu :default-active="activeItemId" class="el-menu-vertical-demo" :router="true" :collapse="isCollapse">
          <template class="leftnav">
              <el-menu-item index="/" :route="{name: 'indexPage'}">
                  <i class="iconfont">&#xe618;</i>
                  <span slot="title">首页</span>
              </el-menu-item>
              <!--分店管理-->
              <el-menu-item index="/orderList" :route="{name: 'orderList'}">
                  <i class="iconfont">&#xe622;</i>
                  <span slot="title">点餐列表</span>
              </el-menu-item>

              <el-menu-item index="/userList" :route="{name: 'userList'}">
                  <i class="iconfont">&#xe613;</i>
                  <span slot="title">用户列表</span>
              </el-menu-item>

              <el-menu-item index="/positionList" :route="{name: 'positionList'}">
                  <i class="iconfont">&#xe613;</i>
                  <span slot="title">座位管理</span>
              </el-menu-item>

              <el-menu-item index="/productList" :route="{name: 'productList'}">
                  <i class="iconfont">&#xe64d;</i>
                  <span slot="title">商品管理</span>
              </el-menu-item>

              <el-menu-item index="/orderAll" :route="{name: 'orderAll'}">
                  <i class="iconfont">&#xe669;</i>
                  <span slot="title">订单列表</span>
              </el-menu-item>

              <el-menu-item index="/productCateGoryList" :route="{name: 'productCateGoryList'}">
                  <i class="iconfont">&#xe625;</i>
                  <span slot="title">商品分类列表</span>
              </el-menu-item>

              <el-submenu index="tongjifenxi">
                  <template slot="title"><i class="el-icon-document"></i><span style="margin-left: 10px">统计</span></template>
                  <el-menu-item-group>
                      <el-menu-item index="/staticProductDay" :route="{path: '/staticProductDay'}" style="padding-left: 20px"><i class="iconfont">&#xe62d;</i><span slot="title">商品日销售统计</span></el-menu-item>
                      <el-menu-item index="/staticProductMonth" :route="{path: '/staticProductMonth'}" style="padding-left: 20px"><i class="iconfont">&#xe62d;</i><span slot="title">商品月销售统计</span></el-menu-item>
                      <el-menu-item index="/bistroStaticDay" :route="{path: '/bistroStaticDay'}" style="padding-left: 20px"><i class="iconfont">&#xe62d;</i><span slot="title">餐馆日销售统计</span></el-menu-item>
                      <el-menu-item index="/bistroStaticMonth" :route="{path: '/bistroStaticMonth'}" style="padding-left: 20px"><i class="iconfont">&#xe62d;</i><span slot="title">餐馆月销售统计</span></el-menu-item>
                  </el-menu-item-group>
              </el-submenu>
          </template>
          <!--总店管理-->
      </el-menu>
    </el-col>
  </div>
</template>
<style scoped>

</style>
<script>
  import store from '~/vuex/index'
  export default {
    data() {
      return {
        value:true,
        isCollapse: false,
        menus: [],
        user: {}
      };
    },
    computed: {
      activeItemId() {
        return '/' + this.$route.path.split('/')[1]
      }
    },
    created() {
      this.user = store.state.user.me.bistro
      console.log(this.user)

    },
    methods:{
      change(res) {
        if (!res) {
          this.isCollapse = true;
          this.$emit('changeRight', 'right right_change')

        } else{
		      this.isCollapse = false;
          this.$emit('changeRight', 'right')
        }
      }
    }
  }
</script>

<style lang="css" >
  .icon { margin: 0 5px 0 20px; }
  .left .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
  }
  .submenu .el-menu-vertical-demo:not(.el-menu--collapse) {
    border-right: none;
  }
  .menu_ul {
    margin-left: -20px!important;
  }
  .menu_li {
    margin-left: 20px;
  }
  .el-submenu__title i {
    color: #606060!important;
  }
  .el-submenu__title { padding: 0 !important; height: 42px !important; line-height: 42px !important; }
  .el-submenu { width: 235px; }
  .left .el-menu-item.custome-menu { padding: 0 20px !important; width: 100% !important; }
  .left .el-menu-item.custome-menu:hover { background: transparent !important; }
</style>
